<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>ColorPicker</title>
    <script src="/kissy/build/seed-debug.js"></script>
    <style>

        .wrap {
            overflow: hidden;
            zoom: 1;
        }

        .picker-bg {
            outline: 0 none;
            height: 182px;
            width: 182px;
            cursor: default;
            float: left;
            position: relative;
            background: url(assets/picker_mask.png) no-repeat;
        }

        .picker-hue-bg {
            outline: 0 none;
            float: left;
            height: 183px;
            width: 14px;
            cursor: default;
            margin-left: 10px;
            position: relative;
            background: url(assets/hue_bg.png) no-repeat;
        }

        .picker-thumb, .hue-thumb {
            position: absolute;
            left: -9999px;
            top: -9999px;
            cursor: default;
        }

        .hue-thumb {
            left: 0;
        }

        #preview {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>

<h1>HSV RGB Hex DEMO For KISSY</h1>

<div class="wrap">
    <div class="picker-bg">

        <img src="assets/picker_thumb.png" class="picker-thumb" width="11" height="11"/>
    </div>
    <div class="picker-hue-bg">

        <img src="assets/hue_thumb.png" class="hue-thumb" width="18" height="18"/>
    </div>
</div>

<div>

    <p>

        hsl:<span id="hsl"></span>

    </p>

    <p>

        rgb:<span id="rgb"></span>

    </p>

    <p>

        hex:<span id="hex"></span>

    </p>

    <div id="preview">

    </div>

</div>

<script src="/kissy/src/package.js"></script>
<script>

    KISSY.use("color,dd,node", function (S, Color, DD, $) {
        var hsl = $("#hsl"),
                rgb = $("#rgb"),
                hex = $("#hex"),
                preview = $("#preview"),
                pickerBg = $(".picker-bg"),
                pickDD = new DD.Draggable({
                    node: pickerBg,
                    groups: false
                }),
                hueBg = $(".picker-hue-bg"),
                hueDD = new DD.Draggable({
                    node: hueBg,
                    groups: false
                }),
                picker_thumb = pickerBg.first(),
                hue_thumb = hueBg.first(),
                picker_thumb_width = picker_thumb.width(),
                picker_thumb_height = picker_thumb.height(),
                hue_thumb_height = hue_thumb.height();

        var color = new Color({
            r: 255,
            g: 0,
            b: 0
        });

        picker_thumb.css({
            top: -picker_thumb_height / 2,
            left: -picker_thumb_width / 2
        });

        hue_thumb.css({
            top: -hue_thumb_height / 2
        });

        color.on("*Change", function (e) {
            hsl.html(S.escapeHtml(color.toHSL()));
            rgb.html(S.escapeHtml(color.toRGB()));
            hex.html(S.escapeHtml(color.toHex()));
            preview.css("background", color.toHex());
        });

        var pickerBgOffset = pickerBg.offset(),
                pickerBgWidth = pickerBg.width(),
                pickerBgHeight = pickerBg.height(),
                hueBgHeight = hueBg.height(),
                hueBgOffset = hueBg.offset();

        pickerBg.css("background-color", "red");

        function updatePickThumb(e) {
            var s = (e.pageX - pickerBgOffset.left) / pickerBgWidth;
            var v = (1 - (e.pageY - pickerBgOffset.top) / pickerBgHeight);
            if (s < 0 || s > 1 || v < 0 || v > 1) {
                return;
            }
            color.setHSV({
                s: s,
                v: v
            });
            picker_thumb.css({
                left: (e.pageX - pickerBgOffset.left - picker_thumb_width / 2),
                top: (e.pageY - pickerBgOffset.top - picker_thumb_height / 2)
            });
        }


        pickDD.on("drag", function (e) {
            updatePickThumb(e);
        });

        hueDD.on("drag", function (e) {
            updateHueThumb(e);
        });

        pickerBg.on("click", updatePickThumb);

        function updateHueThumb(e) {
            var h = (1 - (e.pageY - hueBgOffset.top) / hueBgHeight) * 360;
            if (h < 0 || h > 360) {
                return;
            }
            color.setHSV({
                h: h
            });
            hue_thumb.css({
                top: (e.pageY - hueBgOffset.top - hue_thumb_height / 2)
            });

            pickerBg.css("background-color", Color.fromHSV({
                h: h,
                s: 1,
                v: 1
            }).toHex());
        }

        hueBg.on("click", updateHueThumb);

    });

</script>
</body>
</html>